<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽背</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            text-align: center;
            background: url('Image/1.jpg') no-repeat center top fixed;
            background-size: contain;
            opacity: 0.9;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 90%;
            max-width: 800px;
        }
        
        h1 {
            color: #3a7bd5;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }
        
        .result {
            font-size: 3rem;
            margin: 40px 0;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-weight: bold;
        }
        
        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        button {
            background: linear-gradient(to right, #3a7bd5, #00d2ff);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .settings {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
        }
        
        .mode-selector {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .mode-btn {
            background: #f0f0f0;
            color: #333;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .mode-btn.active {
            background: linear-gradient(to right, #3a7bd5, #00d2ff);
            color: white;
        }
        
        .count-input {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 60px;
            text-align: center;
        }
        
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background-color: #f00;
            border-radius: 50%;
            pointer-events: none;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg) scale(1); opacity: 1; }
            100% { transform: rotate(360deg) scale(0); opacity: 0; }
        }
        
        .spinner {
            display: none;
            width: 80px;
            height: 80px;
            border: 8px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #3a7bd5;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        
        .history {
            margin-top: 30px;
            text-align: left;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 10px;
        }
        
        .history h3 {
            margin-top: 0;
            color: #3a7bd5;
        }
        
        .history-item {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>抽背</h1>
        
        <div class="mode-selector">
            <div class="mode-btn active" data-mode="single">单人模式</div>
            <div class="mode-btn" data-mode="multiple">多人模式</div>
        </div>
        
        <div class="count-input" id="countContainer">
            <span>抽取人数:</span>
            <input type="number" id="countInput" min="1" max="10" value="1">
        </div>
        
        <div class="spinner" id="spinner"></div>
        
        <div class="result" id="result">准备开始抽背</div>
        
        <div class="buttons">
            <button id="drawBtn">开始抽取</button>
            <button id="resetBtn">重置记录</button>
            <button id="settingsBtn">设置</button>
        </div>
        
        <div class="history">
            <h3>奖池</h3>
            <div id="historyList"></div>
        </div>
    </div>

    <script>
        // 获取图片列表
        function getImageList() {
            return [
                "Image/1.png", "Image/2.png", "Image/3.jpg", "Image/4.png", "Image/5.jpg",
                "Image/6.png", "Image/7.png", "Image/8.png", "Image/9.png", "Image/10.png",
                "Image/11.jpeg", "Image/12.jpeg", "Image/13.png", "Image/14.jpeg", "Image/15.jpeg",
                "Image/16.jpeg", "Image/17.jpeg", "Image/18.jpeg", "Image/19.jpeg", "Image/20.png",
                "Image/21.png", "Image/22.png", "Image/23.jpeg", "Image/24.png", "Image/25.png",
                "Image/26.png", "Image/27.jpeg"
            ];
        }

        // 设置背景图片
        let currentBackground = '';
        function setRandomBackground() {
            if (localStorage.getItem('nativeBg') === 'true') {
                document.body.style.background = 'none';
                document.body.style.backgroundColor = 'white';
                return;
            }
            
            if (!currentBackground) {
                const images = getImageList();
                currentBackground = images[Math.floor(Math.random() * images.length)];
            }
            document.body.style.background = `url('${currentBackground}') no-repeat center center fixed`;
            document.body.style.backgroundSize = 'cover';
            document.body.style.opacity = '0.9';
        }

        // 学生名单
        const students = [
            "林悦", "陈宇轩", "王诗涵", "张梓豪", "李雨彤",
            "刘俊辉", "黄雅琪", "周浩然", "吴思瑶", "郑宇翔",
            "何可欣", "谢子豪", "廖嘉怡", "邓梓阳", "韦诗琪",
            "何梓铭", "张晨熙", "李欣悦", "于梓涵", "陈俊宇",
            "程梓萱", "徐梓睿", "龚梓琳", "骆梓轩", "张梓滢",
            "彭梓豪", "王梓晴", "刘梓航", "李梓萱", "王梓晨",
            "吴梓豪", "石梓俊", "罗梓琪", "唐梓轩", "毛梓豪",
            "唐梓阳", "蒋梓杰", "李梓晨", "阳梓轩", "吴梓豪",
            "杨梓睿", "阮梓豪", "蒋梓萱", "唐梓滢", "石梓俊",
            "凌梓豪", "蒋梓琳", "成梓萱", "秦梓豪", "李梓晨"
        ];
        
        // 音效
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        function playSound(frequency, duration, type) {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.type = type;
            oscillator.frequency.value = frequency;
            gainNode.gain.value = 0.1;
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.start();
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
            oscillator.stop(audioContext.currentTime + duration);
        }
        
        // 获取DOM元素
        const resultEl = document.getElementById('result');
        const drawBtn = document.getElementById('drawBtn');
        const resetBtn = document.getElementById('resetBtn');
        const modeBtns = document.querySelectorAll('.mode-btn');
        const countInput = document.getElementById('countInput');
        const countContainer = document.getElementById('countContainer');
        const spinner = document.getElementById('spinner');
        const historyList = document.getElementById('historyList');
        const container = document.querySelector('.container');
        
        // 模式切换
        let currentMode = 'single';
        
        modeBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                modeBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentMode = btn.dataset.mode;
                
                if (currentMode === 'single') {
                    countContainer.style.display = 'none';
                } else {
                    countContainer.style.display = 'flex';
                }
            });
        });
        
        // 初始化本地存储
        if (!localStorage.getItem('drawnStudents')) {
            localStorage.setItem('drawnStudents', JSON.stringify([]));
        }
        
        // 加载历史记录
        updateHistory();
        
        // 抽取函数
        function drawStudents() {
            const drawnStudents = JSON.parse(localStorage.getItem('drawnStudents'));
            const availableStudents = students.filter(student => !drawnStudents.includes(student));
            
            if (availableStudents.length === 0) {
                resultEl.textContent = '所有同学都已抽背过！';
                return;
            }
            
            // 显示加载动画
            spinner.style.display = 'block';
            resultEl.textContent = '';
            drawBtn.disabled = true;
            
            // 播放心跳音效
            const heartBeatInterval = setInterval(() => {
                playSound(100, 0.2, 'sine');
            }, 600);
            
            // 背景颜色变化
            let hue = 0;
            const bgInterval = setInterval(() => {
                hue = (hue + 5) % 360;
                document.body.style.backgroundColor = `hsl(${hue}, 80%, 90%)`;
            }, 100);
            
            // 模拟抽奖效果
            let counter = 0;
            const interval = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * availableStudents.length);
                resultEl.textContent = availableStudents[randomIndex];
                
                // 名字闪烁效果
                resultEl.style.color = counter % 2 === 0 ? '#ff0000' : '#ffffff';
                
                // 震动效果
                container.style.transform = `translate(${Math.random() * 10 - 5}px, ${Math.random() * 10 - 5}px)`;
                
                // 播放倒计时音效
                playSound(800 - counter * 20, 0.1, 'square');
                
                counter++;
                
                if (counter > 20) {
                    clearInterval(interval);
                    clearInterval(heartBeatInterval);
                    clearInterval(bgInterval);
                    spinner.style.display = 'none';
                    drawBtn.disabled = false;
                    
                    // 重置样式
                    resultEl.style.color = '#333';
                    container.style.transform = 'none';
                    // 不再重新设置背景图片
                    
                    // 确定最终结果
                    let selectedStudents = [];
                    if (currentMode === 'single') {
                        const randomIndex = Math.floor(Math.random() * availableStudents.length);
                        selectedStudents = [availableStudents[randomIndex]];
                    } else {
                        const count = parseInt(countInput.value) || 1;
                        const shuffled = [...availableStudents].sort(() => 0.5 - Math.random());
                        selectedStudents = shuffled.slice(0, Math.min(count, availableStudents.length));
                    }
                    
                    resultEl.textContent = selectedStudents.join('、');
                    
                    // 更新本地存储
                    const newDrawnStudents = [...drawnStudents, ...selectedStudents];
                    localStorage.setItem('drawnStudents', JSON.stringify(newDrawnStudents));
                    
                    // 更新历史记录
                    updateHistory();
                    
                    // 创建彩色纸屑效果
                    createConfetti();
                }
            }, 100);
        }
        
        // 重置函数
        function resetHistory() {
            localStorage.setItem('drawnStudents', JSON.stringify([]));
            updateHistory();
            resultEl.textContent = '记录已重置';
        }
        
        // 更新历史记录显示
        function updateHistory() {
            const drawnStudents = JSON.parse(localStorage.getItem('drawnStudents'));
            historyList.innerHTML = drawnStudents.length > 0 
                ? drawnStudents.map(student => `<div class="history-item">${student}</div>`).join('')
                : '<div>暂无记录</div>';
        }
        
        // 创建彩色纸屑效果
        function createConfetti() {
            const colors = ['#3a7bd5', '#00d2ff', '#f64f59', '#f12711', '#f5af19'];
            
            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = -10 + 'px';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.width = Math.random() * 10 + 5 + 'px';
                confetti.style.height = confetti.style.width;
                
                document.body.appendChild(confetti);
                
                const animation = confetti.animate([
                    { top: -10 + 'px', transform: 'rotate(0deg)', opacity: 1 },
                    { top: Math.random() * 100 + 50 + 'vh', transform: 'rotate(' + Math.random() * 360 + 'deg)', opacity: 0 }
                ], {
                    duration: Math.random() * 3000 + 2000,
                    easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)'
                });
                
                animation.onfinish = () => confetti.remove();
            }
            
            // 播放庆祝音效
            playSound(1000, 1, 'sine');
            playSound(1500, 1, 'sine');
            playSound(2000, 1, 'sine');
        }
        
        // 设置窗口
        const settingsBtn = document.getElementById('settingsBtn');
        const settingsModal = document.createElement('div');
        settingsModal.className = 'settings-modal';
        settingsModal.innerHTML = `
            <div class="modal-content">
                <h3>设置</h3>
                <div class="setting-option">
                    <label>
                        <input type="checkbox" id="muteToggle"> 静音
                    </label>
                </div>
                <div class="setting-option">
                    <label>
                        <input type="checkbox" id="nativeBgToggle"> 原生背景
                    </label>
                </div>
                <div class="setting-option">
                    <label>
                        <input type="checkbox" id="historyToggle"> 显示奖池
                    </label>
                </div>
                <div class="setting-option">
                    <button id="changeBgBtn">换个背景</button>
                </div>
                <button id="closeSettings">关闭</button>
            </div>
        `;
        document.body.appendChild(settingsModal);
        
        // 初始化静音状态
        if (!localStorage.getItem('mute')) {
            localStorage.setItem('mute', 'false');
        }
        document.getElementById('muteToggle').checked = localStorage.getItem('mute') === 'true';
        
        // 初始化原生背景状态
        if (!localStorage.getItem('nativeBg')) {
            localStorage.setItem('nativeBg', 'false');
        }

        // 初始化奖池显示状态
        if (!localStorage.getItem('showHistory')) {
            localStorage.setItem('showHistory', 'true');
        }
        document.querySelector('.history').style.display = localStorage.getItem('showHistory') === 'true' ? 'block' : 'none';
        document.getElementById('nativeBgToggle').checked = localStorage.getItem('nativeBg') === 'true';

        // 奖池显示切换事件
        document.getElementById('historyToggle').addEventListener('change', (e) => {
            localStorage.setItem('showHistory', e.target.checked);
            document.querySelector('.history').style.display = e.target.checked ? 'block' : 'none';
        });

        // 初始化显示状态
        if (!localStorage.getItem('showHistory')) {
            localStorage.setItem('showHistory', 'true');
        }
        document.getElementById('historyToggle').checked = localStorage.getItem('showHistory') === 'true';
        document.querySelector('.history').style.display = localStorage.getItem('showHistory') === 'true' ? 'block' : 'none';
        
        // 设置窗口样式
        const style = document.createElement('style');
        style.textContent = `
            .settings-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.3);
                z-index: 1000;
                justify-content: center;
                align-items: center;
                backdrop-filter: blur(5px);
            }
            
            .settings-modal .modal-content {
                background-color: rgba(255,255,255,0.9);
                padding: 30px;
                border-radius: 15px;
                width: 300px;
                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            }
            
            .settings-modal h3 {
                margin-top: 0;
                color: #3a7bd5;
            }
            
            .setting-option {
                margin: 20px 0;
            }
            
            .settings-modal button {
                width: 100%;
                margin-top: 20px;
            }
        `;
        document.head.appendChild(style);
        
        // 设置窗口事件
        settingsBtn.addEventListener('click', () => {
            settingsModal.style.display = 'flex';
        });
        
        document.getElementById('closeSettings').addEventListener('click', () => {
            settingsModal.style.display = 'none';
        });
        
        // 静音切换
        document.getElementById('muteToggle').addEventListener('change', (e) => {
            localStorage.setItem('mute', e.target.checked);
        });
        
        // 原生背景切换
        document.getElementById('nativeBgToggle').addEventListener('change', (e) => {
            localStorage.setItem('nativeBg', e.target.checked);
            if (e.target.checked) {
                document.body.style.background = 'none';
                document.body.style.backgroundColor = 'white';
            } else {
                setRandomBackground();
            }
        });

        // 奖池显示切换事件
        document.getElementById('historyToggle').addEventListener('change', (e) => {
            localStorage.setItem('showHistory', e.target.checked);
            document.querySelector('.history').style.display = e.target.checked ? 'block' : 'none';
        });

        // 切换背景按钮
        document.getElementById('changeBgBtn').addEventListener('click', () => {
            currentBackground = ''; // 重置当前背景
            setRandomBackground(); // 重新设置随机背景
        });
        
        // 修改playSound函数检查静音状态
        function playSound(frequency, duration, type) {
            if (localStorage.getItem('mute') === 'true') return;
            
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.type = type;
            oscillator.frequency.value = frequency;
            gainNode.gain.value = 0.1;
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.start();
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
            oscillator.stop(audioContext.currentTime + duration);
        }
        
        // 初始化随机背景
        setRandomBackground();

        // 事件监听
        drawBtn.addEventListener('click', drawStudents);
        resetBtn.addEventListener('click', resetHistory);
    </script>
</body>
</html>